<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>echarts</title>
		<!-- 步骤1：引入echarts.js文件 -->
		<script src="./js/echarts.js"></script>
		<script src="../jquery相关/js/jq.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px;"></div>
		<script>
			let mCharts = echarts.init(document.querySelector('div'));
			mCharts.showLoading()
			$.get('data/test_data.json', (ret) => {
				mCharts.hideLoading()
				let axisData = []
				for (let i = 0; i < ret.length; i++) {
					let height = ret[i].height
					let weight = ret[i].weight
					let itemArr = [height, weight]
					axisData.push(itemArr)
				}
				let option = {
					xAxis: {
						type: 'value',
						scale: true
					},
					yAxis: {
						type: 'value',
						scale: true
					},
					series: [{
						// type: 'scatter',
						type: 'effectScatter',
						showEffectOn: 'emphasis', // render默认  emphasis 鼠标移入时显示涟漪效果
						rippleEffect: { //控制涟漪动画的范围大小
							scale: 5
						},
						data: axisData,
						symbolSize: (arg) => {
							console.log(arg);
							let height = arg[0] / 100
							let weight = arg[1]
							//bim = 体重 kg/（身高 m*身高 m）  大于28，就代表肥胖
							return weight / (height * height) > 28 ? 20 : 10
						},
						itemStyle: {
							color: (arg) => {
								console.log(arg)
								let height = arg.data[0] / 100
								let weight = arg.data[1]
								//bim = 体重 kg/（身高 m*身高 m）  大于28，就代表肥胖
								return weight / (height * height) > 28 ? 'red' : 'green'
							}
						}

					}]
				}
				mCharts.setOption(option)
			})
		</script>
	</body>
</html>
